{extend name="base"/}
{block name="title"}命令模式{/block}
{block name="resource"}

{/block}
{block name="body"}
<button id="button1">点击按钮1</button>
<button id="button2">点击按钮2</button>
<button id="button3">点击按钮3</button>
{/block}
{block name="script"}
<script>
    var button1 = document.getElementById( 'button1' );
    var button2 = document.getElementById( 'button2' );
    var button3 = document.getElementById( 'button3' );
    var setCommand = function(button, command){
        button.onclick = function(){
            command.execute();
        }
    }

    var menuBar = {
        refresh : function(){
            console.log('refresh');
        }
    }

    var subMenu = {
        add : function(){
            console.log('add');
        },
        del : function(){
            console.log('del');
        }
    }

    var RefreshMenuBarCommand = function(receiver){
        this.receiver = receiver;
    }
    RefreshMenuBarCommand.prototype.execute = function(){
        this.receiver.refresh();
    }

    var AddSubMenuCommand = function(receiver){
        this.receiver = receiver;
    }
    AddSubMenuCommand.prototype.execute = function(){
        this.receiver.add();
    }

    var DelSubMenuCommand = function(receiver){
        this.receiver = receiver;
    }
    DelSubMenuCommand.prototype.execute = function(){
        this.receiver.del();
    }

    var refreshMenuBarCommand = new RefreshMenuBarCommand(menuBar);
    var addSubMenuCommand = new AddSubMenuCommand(subMenu);
    var delSubMenuCommand = new DelSubMenuCommand(subMenu);

    setCommand(button1, refreshMenuBarCommand);
    setCommand(button2, addSubMenuCommand);
    setCommand(button3, delSubMenuCommand);
</script>
{/block}

